<template>
    <h3>会员显示</h3>
    <div>
        会员姓名
        <input type="text" v-model="list.name">
        手机号
        <input type="text" v-model="list.tel">
        <input type="button" class="btn btn-success" value="查询" @click="memberShow">
        <input type="button" class="btn btn-danger" value="重置" @click="crea">
        <table class="table table-bordered">
            <tbody>
                <tr class="bg-primary">
                    <td>id</td>
                    <td>编号</td>
                    <td>手机号</td>
                    <td>会员姓名</td>
                    <td>身份证号</td>
                    <td>出生日期</td>
                    <td>积分</td>
                    <td>余额</td>
                    <td>会员等级名称</td>
                    <td>会员性别</td>
                    <td>会员爱好</td>
                    <td>会员简介</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in shows" :key="item.mId">
                    <td>{{item.mId}}</td>
                    <td>{{item.memberCode}}</td>
                    <td>{{item.tel}}</td>
                    <td>{{item.userName}}</td>
                    <td>{{item.card}}</td>
                    <td>{{item.birthDay}}</td>
                    <td>{{item.score}}</td>
                    <td>{{item.money}}</td>
                    <td>{{item.levelName}}</td>
                    <td>{{item.gender}}</td>
                    <td>{{item.likes}}</td>
                    <td>{{item.desc}}</td>
                    <td>
                        <input type="button" class="btn btn-danger" value="删除" @click="Del(item.mId)">
                        <input type="button" class="btn btn-warning" value="修改" @click="Update(item.mId)">                     
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import{ref,reactive,onMounted}from 'vue'
import axios from 'axios'
import {useRouter,useRoute} from 'vue-router';
const router=useRouter();
const route=useRoute();
onMounted(()=>{
    memberShow();
})
//修改
const Update=(id:any)=>{
    router.push({
        path:'/memberupdate',
        query:{
            id:id,
        },
    })
}
//删除
const Del=(id:any)=>{
    var f=confirm("确认删除吗?")
    if(f){
        axios({
            url:'https://localhost:7253/api/Member/DelMember',
            method:'delete',
            params:{
                id:id,
            }
        })
        .then((res)=>{
            console.log(res)
            if(res.data>0){
                alert('删除成功')
                memberShow()
                return;
            }
            else{
                alert('删除失败')
                return;
            }
        })
        .catch((err)=>{
            console.log(err);
            
        })
    }
}
//修改
//重置
const crea=()=>{
    list.value.name='';
    list.value.tel='';
    memberShow();
}
//定义查询条件
let list:any=ref({
    name:'',
    tel:''
})
//显示
let shows:any=ref([]);
const memberShow=()=>{
    axios({
        url:'https://localhost:7253/api/Member/MemberShow',
        method:'get',
        params:list.value
    })
    .then((res)=>{
        console.log(res);
        shows.value=res.data
    })
    .catch((err)=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>